<template>
  <div>
    <a-form :model="dataSource" ref="timeRef" layout="horizontal">
      <a-table rowKey="id" bordered size="small" :dataSource="dataSource" :columns="addDayColumns" :pagination="false" class="form-table mb-20" :scroll="{y: 400}">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'timeRange'">
            <span class="text-red">*</span>{{ $t('hangManage.periodTime') }}
          </template>
          <template v-if="column.key === 'production'">
            <span class="text-red">*</span>{{$t('hangManage.targetYield')}}
          </template>
        </template>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'timeRange'">
            <a-form-item :name="[index, 'timeRange']" :rules="[{ validator: (_rule, value)=> validateTime(_rule, value, record.timeRange, index), trigger: 'change'}]">
              <a-time-range-picker v-model:value="record.timeRange" format="HH:mm" value-format="HH:mm" @change="onTimeChange"/>
            </a-form-item>
          </template>
          <template v-if="column.key === 'production'">
            <a-form-item :name="[index, 'production']">
              <a-input-number v-model:value="record.production" :min="0" />
            </a-form-item>
          </template>
          <template v-else-if="column.key === 'operate'">
            <span class="table-operate-container">
              <a-button type="link" class="primary-link" @click="handleAdd">{{ $t('common.addNew') }}</a-button>
              <a-divider type="vertical" />
              <a-button type="link" class="warning-link" :disabled="dataSource.length === 1" @click="handleDelete(record.id)">{{ $t('common.del') }}</a-button>
            </span>
          </template>
        </template>
      </a-table>
    </a-form>
  </div>

</template>

<script setup>
import { ref, watch } from 'vue'
import { cloneDeep } from 'lodash'
import { addDayColumns } from './config'
import i18n from '@/locales/index'
const { t } = i18n.global
let props = defineProps({
  tableData: {
    type: Array,
    required: true,
    default: () => []
  },
})
let dataSource = ref([])
const timeRef = ref()
const handleAdd = () => {
  dataSource.value.push({ timeRange: [], production: 0, id: Math.random() })
}
const handleDelete = (id) => {
  dataSource.value = dataSource.value.filter(item => item.id !== id)
}

const validateTime = async (_rule, value, record, index) => {
  if (!value || (value && !value.length)) {
    return Promise.resolve()
  } else {
    let choosedTimeList = []
    dataSource.value.forEach((el, i) => {
      if (i != index) {
        if (el.timeRange.length) choosedTimeList.push(el.timeRange)
      }
    })
    let flag = false
    choosedTimeList.forEach(i => {
      if (!(value[1] <= i[0] || value[0] >= i[1])) flag = true
    })
    if (!flag) {
      return Promise.resolve()
    } else {
      return Promise.reject(t('other.dateUsed'))
    }
  }
}
const onTimeChange = () => {
  timeRef.value.validateFields()
}

watch(
    () => props.tableData,
    (newVal) => {
      dataSource.value = newVal.length ? cloneDeep(newVal) : [{ timeRange: undefined, production: 0, id: Math.random() }]
    },{ deep: true, immediate: true }
) 
defineExpose({
  timeRef,
  dataSource
})
</script>
